<template>
  <div class="subcribe-list-dialog-wrap" >
    <el-drawer
      v-loading="loading"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :show-close="false"
      :append-to-body="true"
      :class="{'mobile-el-dialog': showMobilePage}"
      class="subcribe-list-dialog"
      size="80%"
      @closed="closeDialog"
      @open="openDialog"
    >
      <div class="head-wrap">
        <Title :title="isPerson? '查看预约' : '搜索预约'" font-size="16px" style="margin: 0 0 16px; flex:1"/>
        <export-button
          ref="orderExportRef"
          :export-api="exportApi"
          :export-name="exportName"
          :format="format || 'xlsx'"
          :is-before-export="true"
          is-diy
          @onComplate="exportonComplate"
          @beforeExport="beforeExport">
          <el-button class="search-btn-style export-btn" size="small"><i v-if="exportLoading" class="el-icon-loading"/> 导出</el-button>
        </export-button>
      </div>
      <div class="dialog-scroll">
        <div>
          <div ref="headerForm" class="mb10">
            <filter-input
              ref="FilterToolRef"
              v-model="queryForm"
              :filter-list="getfilterList()"
              show-search-btn
              line-feed
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
            />
          </div>
          <div v-loading="listLoading" class="table-list">
            <el-row>
              <el-table
                :data="list.items"
                element-loading-text="加载中..."
                empty-text="暂无数据"
                class="fb-table"
                header-cell-class-name="order-data-header-cell"
                fit
                hightlight-current-row
                @sort-change="sortMethod"
              >
                <el-table-column width="50" prop="resourceId" align="center" label="编号">
                  <template slot-scope="scope">
                    <div class="resource-info resource-info-first">
                      <span>{{ (list.page - 1) * list.perPage + scope.$index + 1 }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="120" prop="resourceId" align="left" label="资源">
                  <template slot-scope="scope">
                    <div class="resource-info">
                      <resource-flag :resource-id="scope.row.resourceId" />
                      <div class="name ellipsisOne">
                        <resource-info
                          :resource-name="scope.row.resourceName"
                          :account-name-organization="scope.row.accountNameOrganization"
                          :resource-id="scope.row.resourceCode"
                          :account-name-platform="scope.row.accountNamePlatform"
                          account-belong-name="none"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="120" prop="name" align="left" label="预约">
                  <template slot-scope="scope">
                    <ToolTip :content="scope.row.name" />
                  </template>
                </el-table-column>
                <el-table-column :width="50" align="center" label="状态">
                  <template slot-scope="scope">
                    <div class="flex-wrap">
                      <el-tooltip :content="statusContnet(scope.row.status)" class="item" effect="dark" placement="top-start">
                        <div :class="statusImage(scope.row.status)" class="status-img" >
                          <i v-if="scope.row.status === 2" class="el-icon-circle-close" />
                          <i v-if="scope.row.status === 1" class="el-icon-circle-check" />
                          <i v-if="scope.row.status === 0" class="el-icon-time" />
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="subscribeUsers" align="left" label="预约人">
                  <template slot-scope="scope">
                    <el-tooltip :content="switchSubcribeUser(scope.row.subscribeUsers)" class="item" effect="dark" placement="top-start">
                      <div class="text-overflow">{{ switchSubcribeUser(scope.row.subscribeUsers) }}</div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column :width="200" sortable="custom" prop="start_date" align="left" label="预约时间">
                  <template slot-scope="scope">
                    <div v-if="scope.row.startDate || scope.row.endDate" >
                      <div>{{ changeTimeFormat(scope.row.startDate)+'-'+changeTimeFormat(scope.row.endDate) }} </div>
                    </div>
                    <div v-else>--</div>
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="orderForm" align="left" label="下单形式">
                  <template slot-scope="scope">
                    <ToolTip :content="scope.row.orderForm" />
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="type" align="left" label="投放类型">
                  <template slot-scope="scope">
                    <ToolTip :content="scope.row.type" />
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="bandName" align="left" label="品牌名称">
                  <template slot-scope="scope">
                    <ToolTip :content="scope.row.brandName" />
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="demandCategoryName" align="left" label="品牌标签">
                  <template slot-scope="scope">
                    <ToolTip :content="scope.row.demandCategoryName" />
                  </template>
                </el-table-column>
                <el-table-column :width="200" prop="exclusiveDateTime" align="left" label="排他时间">
                  <template slot-scope="scope">
                    <div v-if="scope.row.exclusiveStartTime">
                      <div>{{ changeTimeFormat(scope.row.exclusiveStartTime)+'-'+changeTimeFormat(scope.row.exclusiveEndTime) }} </div>
                    </div>
                    <div v-else>--</div>
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="updateName" align="left" label="备注">
                  <template slot-scope="scope">
                    <ToolTip :content="scope.row.remark" />
                  </template>
                </el-table-column>
                <el-table-column :width="150" sortable="custom" prop="create_date" align="left" label="创建时间">
                  <template slot-scope="scope">
                    <div>{{ changeTimeFormat(scope.row.subscribeDate) }}</div>
                  </template>
                </el-table-column>
                <el-table-column :width="100" prop="updateName" align="left" label="更新人">
                  <template slot-scope="scope">
                    <span>{{ scope.row.updateName }}</span>
                  </template>
                </el-table-column>
                <el-table-column :width="150" sortable="custom" align="left" prop="update_date" label="更新时间">
                  <template slot-scope="scope">
                    <div>{{ changeTimeFormat(scope.row.updateDate) }}</div>
                  </template>
                </el-table-column>
                <el-table-column align="left" width="50" label="操作" fixed="right">
                  <template slot-scope="scope">
                    <el-dropdown class="operation-btn" trigger="click">
                      <div class="el-dropdown-link pointer">
                        <img :src="setting" alt="操作">
                      </div>
                      <el-dropdown-menu
                        slot="dropdown"
                        class="dropdown-menu-subscribe"
                      >
                        <el-dropdown-item
                          @click.native="btnCheck(scope.row)"
                        >
                          <div>查看</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          @click.native="btnLaunch(scope.row)"
                        >
                          <div>通知</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="(hasRouteAuth('crm:subcribe:all') || isOperation(scope.row.accountOperationList) || isSubcriber(scope.row.subscribeUsers)) && scope.row.status !== 1"
                          @click.native="btnEdit(scope.row)"
                        >
                          <div>编辑</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="(hasRouteAuth('crm:subcribe:all') || isOperation(scope.row.accountOperationList)) && scope.row.status !== 1"
                          @click.native="btnAffirm(scope.row)"
                        >
                          <div>确认</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="(hasRouteAuth('crm:subcribe:all') || isOperation(scope.row.accountOperationList) || isSubcriber(scope.row.subscribeUsers)) && scope.row.status !== 1"
                          @click.native="btnRefresh(scope.row)"
                        >
                          <div>{{ scope.row.status === 0 ? '取消' : '恢复' }}</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="(hasRouteAuth('crm:subcribe:all') || isSubcriber(scope.row.subscribeUsers)) && scope.row.status !== 1"
                          @click.native="btnDel(scope.row)"
                        >
                          <div>删除</div>
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="(hasRouteAuth('crm:subcribe:cancleAffirm')) && scope.row.status === 1"
                          @click.native="btnCancleAffirm(scope.row)"
                        >
                          <div>取消确认</div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <div v-if="list.items.length === 0" class="empty-wrap">
              <empty-placeholder />
            </div>
          </div>
        </div>
      </div>
      <div v-show="list.total > 0" class="bottom-pagination">
        <el-pagination
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-drawer>
    <edit-subcribe-dialog ref="editSubscribeDialog" @success="subscribeEditSuccess" @openSubcribeListDialog="closeEditSubscribeDialog" />
    <subcribe-detail-dialog ref="subscribeDetailDialog" />
    <dingTalkMessage ref="dingTalkMsg" :is-show-btn="false" />
  </div>
</template>
<script>
import Title from '@/components/Title';
import ResourceFlag from '@/components/Subcribe/resourceFlag';
import EditSubcribeDialog from './edit-subcribe-dialog';
import SubcribeDetailDialog from './subcribe-detail-dialog';
import ResourceInfo from '@/components/ResourceInfo';
import ExportButton from '@/components/ExportButton';
import dingTalkMessage from '@/components/Common/dingTalkMessage';
import { showModal } from '@/utils/message';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
// import queryForm from '@/components/Tool/filter';
import { getSubcribeList, subscribeDelete, changeSubcribeStatus } from '@/api/subcribe';
import { getList as getUserList } from '@/api/user';
import { orderFormList, getNeedCategoryList } from '@/api/select';
import { hasRouteAuth } from '@/utils/permission';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { selectTypeOptions } from '@/views/subcribe/model/selectData';
import setting from '@/assets/setting.png';
import iconWait from '@/assets/auditProcess/status4.png';
import iconComplete from '@/assets/auditProcess/status4.png';
import iconCancel from '@/assets/icon-cancel.png';
import { mapState } from 'vuex';

export default {
  name: 'SubcribeListDialog',
  components: {
    Title,
    EditSubcribeDialog,
    SubcribeDetailDialog,
    ResourceFlag,
    ResourceInfo,
    EmptyPlaceholder,
    ExportButton,
    dingTalkMessage
    // queryForm
  },
  props: {
    subscribeSearchInfo: {
      type: Object,
      default: () => null
    },
    isShowDialog: {
      type: Boolean,
      default: false
    },
    status: {
      type: Number,
      default: null
    },
    startDate: {
      type: Number,
      default: null
    },
    endDate: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      setting,
      iconWait,
      iconCancel,
      iconComplete,
      loading: false,
      exportLoading: false,
      isPerson: false,
      dialogVisible: false,
      isUpdateUserSelect: false,
      userSelectDisabled: false,
      defaultProposerList: [],
      listLoading: true,
      isCheck: false,
      isEdit: false, // 是否有编辑
      page: 1,
      perPage: 20,
      screenHeight: 0,
      headerFormHeight: 0,
      ids: [],
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInint: true
      },
      queryForm: {},
      exportApi: '/admin/subscrbe/export',
      exportName: '日历导出',
      format: '',
      categoryAry: [],
      orderForms: [],
      sortType: '',
      sortName: '',
      platformType: '', // 下单平台
      rangeKeyArr: [{
        attr: 'dateTime',
        start: 'startDate',
        end: 'endDate'
      }, {
        attr: 'exclusiveDateTime',
        start: 'exclusiveStartTime',
        end: 'exclusiveEndTime'
      }]
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    dialogTableMaxHeight() {
      return (this.screenHeight * 0.8) - 124 - this.headerFormHeight;
    }
  },
  created() {
    this.needCategoryList();
  },
  destroyed() {
    window.onresize = null;
  },
  methods: {
    getfilterList() {
      const arr = [
        { keyword: 'keyword', name: '预约名称', labelWidth: '70px', type: 'input' },
        { keyword: 'brandName', name: '品牌名称', labelWidth: '70px', type: 'input' },
        { keyword: 'resourceName', name: '资源名称', labelWidth: '70px', type: 'input' },
        { keyword: 'remark', name: '备注', labelWidth: '70px', type: 'input' },
        { keyword: 'demandCategory', name: '品牌标签', labelWidth: '70px', type: 'cascaderSelect', childrenVal: 'item', options: this.categoryAry },
        { keyword: 'orderForm', name: '下单形式', labelWidth: '70px', type: 'select', options: this.orderForms },
        { keyword: 'status', name: '预约状态', labelWidth: '70px', type: 'select', options: [
          {
            value: 0,
            label: '待确认'
          }, {
            value: 1,
            label: '已确认'
          }, {
            value: 2,
            label: '已取消'
          }
        ] },
        { keyword: 'type', name: '投放类型', labelWidth: '70px', type: 'select', options: selectTypeOptions },
        { keyword: 'relateType', name: '关联人员', labelWidth: '70px', type: 'select', options: [{
          value: 1,
          label: '执行人'
        }, {
          value: 2,
          label: '预约人'
        }] },
        { keyword: 'dateTime', labelWidth: '70px', name: '预约时间', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'exclusiveDateTime', labelWidth: '70px', name: '排他时间', timeType: 'daterange', type: 'rangeDate' },
        {
          keyword: 'relationId',
          name: '关联人',
          type: 'loadMoreSelect',
          valueName: 'id',
          labelName: 'userName',
          placeholder: '请选择关联人',
          searchkeyword: 'userName',
          apiUrl: '/admin/user/list' }
      ];
      if (this.isPerson) {
        arr.pop();
        const defaultList = [];
        this.defaultProposerList.forEach(el => {
          defaultList.push({
            value: el.id,
            label: el.userName
          });
        });
        arr.push({ keyword: 'relationId', name: '关联人', labelWidth: '130px', type: 'select', options: defaultList });
      }
      return arr;
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.sortType = '';
      this.sortName = '';
      this.queryForm = {};
      this.fetchData(true);
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    changeTimeFormat(time) {
      return time && time.replace(/-/g, '/');
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      this.listLoading = true;
      // 参数处理
      const params = this.formatParams(this.queryForm);
      getSubcribeList(params).then(res => {
        if (res.code === 200) {
          this.list = res.data;
        }
        this.list.isInint = false;
        this.listLoading = false;
      }, result => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    // 获取下单形式
    getFormList() {
      orderFormList(this.platformType).then((res) => {
        const data = JSON.parse(JSON.stringify(res.data).replace(/value/g, 'label').replace(/id/g, 'value'));// 修改属性名
        this.orderForms = data;
        if (res.code === 500) {
          this.$message.error(res.message);
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    // 获取品牌标签
    needCategoryList() {
      getNeedCategoryList().then(res => {
        this.categoryAry = res.data;
        if (res.code === 500) {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.error(err);
      });
    },
    // 预约列表导出
    formatParams(paramsObj, isExport = false) {
      const { page, perPage } = this;
      const params = isExport ? {} : { page, perPage };
      Object.keys(paramsObj).forEach((key) => {
        if (paramsObj[key]) {
          params[key] = paramsObj[key];
        }
      });
      if (paramsObj.status === 0) {
        params.status = paramsObj.status;
      }
      paramsRangeFormat(this.rangeKeyArr, params);
      delete params.dateTime;
      delete params.exclusiveDateTime;
      params.sortName = this.sortName;
      params.sortType = this.sortType;
      return params;
    },
    beforeExport() {
      const params = this.formatParams(this.queryForm, true);
      this.btnExport(params);
    },
    exportonComplate() {
      this.exportLoading = false;
    },
    btnExport(params, message = '是否确定导出数据？') {
      if (!this.exportLoading && this.$refs.orderExportRef) {
        showModal(message, '', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).then(() => {
          this.exportLoading = true;
          this.$refs.orderExportRef.btnExport(params);
        }).catch(() => {
          this.exportLoading = false;
        });
      }
    },
    switchSubcribeUser(users) {
      if (users && users.length > 0) {
        const names = users.map(item => item.userName);
        return names.join('/');
      } else {
        return '--';
      }
    },
    // 获取用户信息 用于获取具体用户的信息
    async getUserInfo(id) {
      const params = {
        userId: id
      };
      const res = await getUserList(1, 1, params);
      if (res.code === 200 && res.data.items.length > 0) {
        return res.data.items;
      }
      return [];
    },
    clearSelectResourceList() {
      this.selectResourceIds = [];
      this.tableSelectList = [];
    },
    keywordBlur() {
      const str = this.queryForm.keyword.replace(/(^\s*)|(\s*$)/g, '');
      this.queryForm.keyword = str;
    },
    returnTime(date) {
      if (date) {
        const dateSplit = date.split(' ');
        return dateSplit;
      } else {
        return ['--', ''];
      }
    },
    // 判断是否是创建人
    isCreator(id) {
      return this.userInfo.id === id;
    },
    isOperation(ids) { // 是否是执行人
      return ids.indexOf(this.userInfo.id) >= 0;
    },
    isSubcriber(ids) { // 是否是预约人
      const subcriber = ids.map(item => item.id);
      return subcriber.indexOf(this.userInfo.id) >= 0;
    },
    hasRouteAuth,
    // 判断是否需要展示资源flag
    subscribeEditSuccess() {
      this.handleEdit();
      this.fetchData();
    },
    statusContnet(status) {
      switch (status) {
        case 0:
          return '已预约待确认';
        case 1:
          return '预约已确认';
        case 2:
          return '预约已取消';
        default:
          break;
      }
    },
    statusImage(status) {
      switch (status) {
        case 0:
          return 'wait';
        case 1:
          return 'tick';
        case 2:
          return 'cancle';
        default:
          break;
      }
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
    },
    handleClose() {
      this.ids = [];
      this.isCheck = false;
      this.queryForm = {};
      this.userSelectDisabled = false;
      this.dialogVisible = false;
      this.list.items = [];
      this.list.total = 0;
      this.list.isInint = true;
      this.isPerson = false;
      this.defaultProposerList = [];
      this.isUpdateUserSelect = false;
    },
    closeDialog() {
      window.onresize = null;
      this.$emit('closeDialog', this.isEdit);
      // this.$refs.addFieldModule.clear();
    },
    closeEditSubscribeDialog(val) {
      this.$refs.editSubscribeDialog.handleClose();
      this.queryForm = { ...val };
      this.fetchData();
    },
    btnCheck(item) {
      this.$refs.subscribeDetailDialog.dialogVisible = true;
      this.$refs.subscribeDetailDialog.initInfo(item);
    },
    btnLaunch(item) {
      let ids = [];
      const name = item.name;
      const operateIds = item.accountOperationList;
      const subscriber = item.subscribeUsers.map(jitem => jitem.id);
      if (subscriber && subscriber.length > 0) {
        ids = [...ids, ...subscriber];
        const userIdIndex = ids.indexOf(this.userInfo.id);
        if (userIdIndex >= 0) {
          ids.splice(userIdIndex, 1);
        }
      }
      if (operateIds && operateIds.length > 0) {
        ids = [...ids, ...operateIds];
        const userIdIndex = ids.indexOf(this.userInfo.id);
        if (userIdIndex >= 0) {
          ids.splice(userIdIndex, 1);
        }
      }
      if (ids.length === 0) {
        if (item.createUserId && this.userInfo.id !== item.createUserId) {
          ids.push(item.createUserId);
        }
      }
      ids = Array.from(new Set(ids));
      this.$refs['dingTalkMsg'].hasDefaultShowDialog(ids, name);
    },
    btnEdit(item) {
      this.$refs.editSubscribeDialog.dialogVisible = true;
      this.$refs.editSubscribeDialog.initInfo(item);
    },
    btnDel(item) {
      showModal('删除后无法恢复！', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false,
        center: true,
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        const param = {
          version: item.version
        };
        subscribeDelete(item.id, param).then(res => {
          if (res.code === 200) {
            this.$message({ type: 'success', message: '删除成功' });
            this.handleEdit();
            this.fetchData();
          }
        });
      });
    },
    btnRefresh(item) {
      let status;
      if (item.status === 0) {
        status = 2;
      } else {
        status = 0;
      }
      const params = {
        id: item.id,
        status,
        version: item.version
      };
      changeSubcribeStatus(params).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '修改成功' });
          this.handleEdit();
          this.fetchData();
        }
      });
    },
    btnCancleAffirm(item) {
      const params = {
        id: item.id,
        status: 0,
        version: item.version
      };
      changeSubcribeStatus(params).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success', message: '取消确认成功' });
          this.handleEdit();
          this.fetchData();
        }
      });
    },
    btnAffirm(item) {
      showModal('确认后将无法修改和删除', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false,
        center: true,
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        const params = {
          id: item.id,
          status: 1,
          version: item.version
        };
        changeSubcribeStatus(params).then(res => {
          if (res.code === 200) {
            this.$message({ type: 'success', message: '确认成功' });
            this.handleEdit();
            this.fetchData();
          }
        });
      });
    },
    openDialog() {
      this.getFormList();
      this.isEdit = false;
      this.isUpdateUserSelect = true;
      if (this.isPerson) {
        this.defaultProposerList = [{ id: this.userInfo.id, userName: this.userInfo.userName }];
        this.queryForm.relationId = this.userInfo.id;
        this.queryClick(true);
      } else {
        this.queryClick(true);
      }
    },
    setInitData(ids, dateTime, isPerson = false, resourceName) {
      const userids = ids.join(',');
      this.$set(this.queryForm, 'ids', userids);
      this.$set(this.queryForm, 'dateTime', dateTime);
      this.$set(this.queryForm, 'resourceName', resourceName);
      if (isPerson) {
        this.isPerson = true;
      }
    },
    // 发生编辑触发的逻辑
    handleEdit() {
      if (!this.isEdit) {
        this.isEdit = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.head-wrap{
  display: flex;
}
.resource-info {
  display: flex;
  color: #999999;
  align-items: center;
  .name {
    color: #333333;
    width: 100%;
  }
}
.header-form{
  display: flex;
  align-items: center;
}
.bottom-pagination{
  display: fixed;
  right: 0;
  bottom: 0;
  text-align: right;
}
.status-img {
  font-size: 16px;
  &.tick {
    color: #406EFF;
  }
  &.wait {
    color: #F67943;
  }
  &.cancle {
    color: #999;
  }
}
.table-list {
  overflow-y: scroll;
  .operation-btn {
    width: 60px;
  }
  .el-table {
    font-size: 14px;
  }
  .el-row {
    padding: 0;
  }
}
.pagination-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}
.flex-wrap , .resource-info-first {
  display: flex;
  align-items: center;
}
.flex-wrap {
  justify-content: flex-start;
}
.resource-info-first {
  justify-content: center;
}
.empty-wrap {
  position: relative;
  top: -64px;
  z-index: 2;
}
.operation-btn {
  .el-dropdown-menu {
    margin-top: -24px;
    margin-right: 15px;
    padding: 0px;
  }
}
</style>
<style lang="scss">
.text-overflow{
   width: 100px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
}
.subcribe-list-dialog {
  & ::v-deep {
    .el-dialog {
      height: 600px;
    }
  }
  .el-drawer__header {
    padding: 0;
    margin: 0;
  }
  .el-drawer__body{
    height: 100%;
    margin-top: 16px;
    padding:0 24px;
  }
  .el-drawer__headerbtn {
    top: 24px;
    z-index: 10;
    .el-dialog__close {
      color: #999;
    }
  }
  .dialog-scroll {
    height: calc(100% - 128px);
    @include scrollBar($x: hidden, $y: auto);
  }
  .el-table--scrollable-y .el-table__body-wrapper {
    width: 99%;
  }
  .el-dialog .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0px;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-dropdown-link:focus {
    outline: 0;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 235px !important;
  }
  .has-search-btn-input {
    .el-input__inner {
      width: 150px;
      padding-right: 35px;
      font-size: 14px;
    }
    .el-input__suffix {
      padding-left: 12px;
      padding-right: 5px;
      line-height: 32px;
    }
    .search-btn {
      cursor: pointer;
      color: #406eff;
    }
  }
  .together-form-item {
    .el-form-item__content {
      display: flex;
    }
    .no-right-border {
      .el-input__inner {
        border-right: none;
        border-radius: 4px 0 0 4px;
      }
    }
    .no-left-radius {
      .el-input__inner {
        border-radius: 0px 4px 4px 0px;
      }
    }
  }
}
.dropdown-menu-subscribe {
  .el-dropdown-menu__item {
    width: 90px;
    text-align: center;
  }
}
.mobile-el-dialog {
  .el-drawer__body {
    padding: 12px 0 12px 12px;
  }
}
</style>
